<template>
	<cl-crud ref="Crud">
		<cl-row>
			<!-- 刷新按钮 -->
			<cl-refresh-btn />
			<el-button type="success" @click="ShopAddNewUserVisible = true">新增用户</el-button>
			<!-- 新增按钮 -->
			<!-- <cl-add-btn /> -->
			<!-- 删除按钮 -->
			<!-- <cl-multi-delete-btn /> -->
			<!-- 导出按钮 -->
			<cl-export-btn :columns="Table?.columns" />
			<cl-flex1 />
			<!-- 条件搜索 -->
			<cl-search ref="Search" />
		</cl-row>

		<cl-row>
			<!-- 数据表格 -->
			<cl-table ref="Table">
				<template #slot-shop-user-btn="{ scope }">
					<el-button
						type="primary"
						@click=""
						>查看</el-button>
					<el-button
						type="primary"
						plain
						@click=""
					>
						编辑
					</el-button>
				</template>
			</cl-table>
		</cl-row>

		<cl-row>
			<cl-flex1 />
			<!-- 分页控件 -->
			<cl-pagination />
		</cl-row>

		<!-- 新增、编辑 -->
		<cl-upsert ref="Upsert" />

		<!-- 新增用户组件 -->
		<shop-add-user
			v-model="ShopAddNewUserVisible"
			:shop-id="shopObj?.id || null"
			@created="handleUserCreated"
		/>
	</cl-crud>
</template>

<script lang="ts" setup>
defineOptions({
	name: 'shop-user'
});

import { useCrud, useTable, useUpsert, useSearch } from '@cool-vue/crud';
import { useCool } from '/@/cool';
import { useI18n } from 'vue-i18n';
import { reactive, ref, watch } from 'vue';
import { ElMessage } from 'element-plus';
import UserSelect from '/$/user/components/user-select.vue';
import { useBase } from '/$/base';
import ShopAddOrder from '../components/shop-add-order.vue';
import ShopViewOrder from '../components/shop-view-order.vue';
import AddOrder from '../components/add-order.vue';
import ShopRefundExchange from '../components/shop-refund-exchange.vue';
import ShopCustomerRelationship from '../components/shop-customer-relationship.vue';
import ShopAddUser from '../components/shop-add-user.vue';

const { service } = useCool();
const { t } = useI18n();
const { user } = useBase();
const ZhongtianAddOrderVisible = ref(false);
const ZhongtianViewOrderVisible = ref(false);
const ShopaddOrderVisible = ref(false);
const RefundExchangeVisible = ref(false);
const CustomerRelationshipVisible = ref(false);
const ShopAddNewUserVisible = ref(false);
const currentOrderObj = ref({});
const currentOrderId = ref(0);
const shopObj = ref({});

// 用户创建成功后的处理函数
const handleUserCreated = () => {
	// 刷新列表
	refresh();
};

// 选项
const options = reactive({
	payStatus: [
		{ label: t('待支付'), value: 0 },
		{ label: t('已支付'), value: 1 },
		{ label: t('支付失败'), value: 2 },
		{ label: t('已退款'), value: 3 }
	],
	genderType: [
		{ label: t('未设置'), value: 0 },
		{ label: t('男'), value: 1 },
		{ label: t('女'), value: 2 }
	]
});

// cl-upsert
const Upsert = useUpsert({
	items: [
		{ label: t('选择用户'), prop: 'userId', component: { vm: UserSelect } },
		{
			label: t('订单号'),
			prop: 'orderNo',
			component: { name: 'el-input', props: { clearable: true } },
			span: 12,
			required: true
		},
		{
			label: t('支付方式'),
			prop: 'payType',
			component: { name: 'el-radio-group', options: options.payType },
			value: 0,
			required: true
		},
		{
			label: t('微信支付码'),
			prop: 'wechatPayCode',
			component: { name: 'el-input', props: { clearable: true } },
			span: 12
		},
		{
			label: t('支付截图'),
			prop: 'payScreenshot',
			component: { name: 'el-input', props: { clearable: true } },
			span: 12
		},
		{
			label: t('总金额'),
			prop: 'totalAmount',
			component: { name: 'el-input', props: { clearable: true } },
			span: 12,
			required: true
		},
		{
			label: t('优惠金额'),
			prop: 'discountAmount',
			component: { name: 'el-input', props: { clearable: true } },
			span: 12,
			required: true
		},
		{
			label: t('支付金额'),
			prop: 'payAmount',
			component: { name: 'el-input', props: { clearable: true } },
			span: 12,
			required: true
		},
		{
			label: t('备注'),
			prop: 'remark',
			component: { name: 'el-input', props: { clearable: true } },
			span: 12
		},
		{
			label: t('选择商品s'),
			prop: 'GoodIds',
			component: { name: 'el-input', props: { clearable: true } },
			span: 12,
			required: true
		},
		{
			label: t('商品详情'),
			prop: 'productDetails',
			component: { name: 'el-input', props: { clearable: true } },
			span: 12
		},
		{
			label: t('优惠详情'),
			prop: 'discountDetails',
			component: { name: 'el-input', props: { clearable: true } },
			span: 12
		},
		{
			label: t('选择商品'),
			prop: 'GoodIds',
			component: { name: 'el-input', props: { clearable: true } },
			span: 12,
			required: true
		},
		{
			label: t('商品详情'),
			prop: 'productDetails',
			component: { name: 'el-input', props: { clearable: true } },
			span: 12
		},
		{
			label: t('优惠详情'),
			prop: 'discountDetails',
			component: { name: 'el-input', props: { clearable: true } },
			span: 12
		},
		{
			label: t('下单时间'),
			prop: 'orderTime',
			component: {
				name: 'el-date-picker',
				props: { type: 'datetime', valueFormat: 'YYYY-MM-DD HH:mm:ss' }
			},
			span: 12
		},
		{
			label: t('微信支付二维码链接'),
			prop: 'codeUrl',
			component: { name: 'el-input', props: { clearable: true } },
			span: 12
		},
		{
			label: t('退款金额'),
			prop: 'refundAmount',
			component: { name: 'el-input', props: { clearable: true } },
			span: 12,
			required: true
		},
		{
			label: t('退款时间'),
			prop: 'refundTime',
			component: {
				name: 'el-date-picker',
				props: { type: 'datetime', valueFormat: 'YYYY-MM-DD HH:mm:ss' }
			},
			span: 12
		},
		{
			label: t('退款单号'),
			prop: 'refundNo',
			component: { name: 'el-input', props: { clearable: true } },
			span: 12
		},
		{
			label: t('选择店铺'),
			prop: 'shopId',
			component: { name: 'el-input', props: { clearable: true } },
			span: 12,
			required: true
		}
	]
});

// cl-table
const Table = useTable({
	columns: [
		{ label: t('ID'), prop: 'id', minWidth: 80 },
		{ label: t('用户'), prop: 'nickName', minWidth: 120 },
		{ label: t('性别'), prop: 'gender', dict: options.genderType, minWidth: 120 },
		{ label: t('手机号'), prop: 'phone', minWidth: 120 },
		{
			label: t('生日'),
			prop: 'birthday',
			minWidth: 120,
			formatter(row) {
				if (row.birthday == undefined || row.birthday == null || row.birthday == '') {
					return '未设置';
				}
				const time = row.birthday.split(' ')[0]
				const birthday = time.split('-')
				const b = birthday[0] + '年' + birthday[1] + '月' + birthday[2] + '日'
				return b;
			}
		},
		{ label: t('预约状态'), prop: 'shopName', minWidth: 120, formatter: (row) => row.shopName || '未预约店铺' },
		{ label: t('备注'), prop: 'remark', minWidth: 120 },
		// { type: 'op', buttons: ["slot-shop-user-btn"], }
	]
});

// cl-search
const Search = useSearch({
	// items: [
	// 	{
	// 		prop: 'orderProgress',
	// 		component: {
	// 			name: 'cl-select',
	// 			props: { options: options.orderProgress, placeholder: '订单状态' }
	// 		}
	// 	}
	// ]
});

// cl-crud
const Crud = useCrud(
	{
		service: service.order.user,
		async onRefresh(params, { next, render }) {
			params.shopId = user.info?.shopId || 0;
			Crud.value.params.shopId = params.shopId;
			const { list } = await next(params);
			// 渲染数据
			render(list);
		}
	},
	app => {
		app.refresh();
	}
);

// 刷新
function refresh(params?: any) {
	Crud.value?.refresh(params);
}

// 监听RefundExchangeVisible.value变化，当为false时执行refresh方法
watch(
	() => RefundExchangeVisible.value,
	(newValue, oldValue) => {
		// 确保是数值变化并且新值为false
		if (newValue !== oldValue && newValue === false) {
			refresh();
		}
	}
);
</script>
